<template>
  <ContainerGroup height="fill" display="flexY" style="margin-top: -8px">
    <Container>
      <FilterForm
        ref="filterForm"
        :elements.sync="filterElements"
        :button-list="buttonList"
      />
    </Container>
    <!-- <Container height="fill" style="height: calc(100% - 96px)"> -->
    <Container height="fill" display="flexY" style="margin-top: 13px">
      <!-- <OperationContainer align="right" style="margin-bottom: 10px">
        <Button icon="export" @click="handleExport">导出</Button>
      </OperationContainer> -->
      <div
        class="table-box"
        style="
          height: calc(100% - 100px);
          overflow-y: auto;
          margin-bottom: 10px;
        "
      >
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          border
          :header-cell-style="{ background: '#f5f7fa' }"
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" align="center" width="55" /> -->
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="55"
          />
          <el-table-column
            prop="inDate"
            align="center"
            label="入院日期"
            width="240"
          />
          <el-table-column prop="name" align="center" label="姓名" />
          <el-table-column prop="sex" align="center" label="性别">
            <template slot-scope="scope">
              {{ scope.row.sex === "1" ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column prop="deptName" align="center" label="拟入院科室" />
          <el-table-column prop="diagName" align="center" label="入院诊断" />
          <!-- <el-table-column prop="examineListName" align="center" label="核酸" /> -->
          <el-table-column
            prop="chargeDocName"
            align="center"
            label="主治医师"
          />
          <el-table-column prop="createBy" align="center" label="申请医生" />
          <el-table-column
            prop="nurseCellName"
            align="center"
            label="实际入住病区"
          />
          <el-table-column prop="bedNo" align="center" label="处理结果" />

          <el-table-column
            prop="patientTag"
            align="center"
            label="患者分属"
            width="100px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.patientTag === '2'">院前患者</span>
              <span v-if="scope.row.patientTag === '0'">普通</span>
              <span v-if="scope.row.patientTag === '1'">日间手术</span>
              <span v-if="scope.row.patientTag === '3'">疑似新冠</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="reglevlName"
            align="center"
            label="挂号类别"
            width="100px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.reglevlName === '急诊'">急诊</span>
              <span v-if="scope.row.reglevlName === '门诊'">门诊</span>
            </template>
          </el-table-column>
          <el-table-column prop="diffDays" align="center" label="入住天数" />
          <!-- <el-table-column
            prop="ifGy"
            align="center"
            label="集管床位状态"
            width="120"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.ifGy === '0'">当前为非集管床位</span>
              <span v-if="scope.row.ifGy === '1'"></span>
            </template>
          </el-table-column> -->
          <el-table-column prop="isBedUggIeBC" align="center" label="是否跨区">
            <template slot-scope="scope">
              <span v-if="scope.row.isBedUggIeBC === '0'">否</span>
              <span v-if="scope.row.isBedUggIeBC === '1'">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="yard" align="center" label="所属院区">
            <template slot-scope="scope">
              <span v-if="scope.row.yard === '1'">三香</span>
              <span v-if="scope.row.yard === '2'">浒关</span>
            </template>
          </el-table-column>
          <el-table-column prop="beizhu" align="center" label="备注" />
        </el-table>
      </div>
      <div style="text-align: right; padding: 12px 0 0 0">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </Container>
  </ContainerGroup>
</template>

<script>
import ContainerGroup from "../../components/ContainerGroup.vue";
import {
  getBedUggIeCW,
  getBedUggIeCWDownLoadExcel,
} from "../../utils/apis/preparedness";
import { getDeptListHis } from "@/utils/apis/registrationApi";
export default {
  name: "CheckReport",
  components: { ContainerGroup },
  data() {
    return {
      total: 0,
      pageSize: 20,
      currentPage: 1,
      loading: false,
      tableData: [],
      filterElements: [
        {
          key: "yard",
          type: "Select",
          label: "院区",
          value: "",
          options: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "三香",
              value: "1",
            },
            {
              label: "浒关",
              value: "2",
            },
          ],
          width: "140",
        },
        {
          key: "deptCode",
          type: "Select",
          label: "部门",
          value: "",
          options: [],
          width: "180",
        },
        {
          key: "patientName",
          type: "Input",
          label: "患者姓名",
          value: "",
          width: "200",
        },
        {
          key: "date",
          type: "DatePicker",
          mode: "daterange",
          label: "入院日期",
          value: this.getDate(),
          width: 300,
        },
        {
          key: "orderBed",
          type: "Select",
          label: "预约/入院",
          value: "0",
          options: [
            {
              label: "全部",
              value: "0",
            },
            {
              label: "预约",
              value: "1",
            },
            {
              label: "入院",
              value: "2",
            },
          ],
          width: "180",
        },
        {
          key: "patientTag",
          type: "Select",
          label: "患者分属",
          value: "",
          options: [
            {
              label: "普通",
              value: "0",
            },
            {
              label: "日间手术",
              value: "1",
            },
            {
              label: "院前患者",
              value: "2",
            },
            {
              label: "疑似新冠",
              value: "3",
            },
          ],
          width: "180",
        },
        {
          key: "reglevlName",
          type: "Select",
          label: "挂号类别",
          value: "",
          options: [
            {
              label: "门诊",
              value: "门诊",
            },
            {
              label: "急诊",
              value: "急诊",
            },
          ],
          width: "180",
        },
        {
          key: "diffDays",
          type: "Input",
          label: "入院天数",
          value: "",
          width: "200",
        },
        {
          key: "bedUggIeBC",
          type: "Select",
          label: "是否跨科室",
          value: "2",
          options: [
            {
              label: "全部",
              value: "2",
            },
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "0",
            },
          ],
        },
      ],
      buttonList: [
        {
          label: "查询",
          type: "primary",
          icon: "search",
          handlerClick: this.handerSearch,
        },
        {
          label: "重置",
          type: "info",
          icon: "reset",
          handlerClick: this.handlerReset,
        },

        {
          label: "DownLoad",
          type: "down",
          icon: "download",
          handlerClick: this.handleExport,
        },
      ],
      dateRange: [],
      newCondition: {},
    };
  },
  mounted() {
    this.newCondition = {
      date: this.filterElements[3]?.value
    }
    this._getData();
    // this.handerSearch()
    this.getDeptSelect();
  },
  methods: {
    getDeptSelect() {
      const params = {
        districtCodeList: ["1", "2"],
      };
      getDeptListHis(params).then((res) => {
        if (res.data.code === 200) {
          this.filterElements[1].options = res.data.data.map((item) => {
            return {
              label: item.deptName,
              value: item.deptCode,
            };
          });
        }
      });
    },
    formatDate(date, type) {
      const year = date.getFullYear();
      const month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : `0${date.getMonth() + 1}`;
      const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`;

      if (type === 1) {
        return `${year}-${month}-${day}`;
      } else {
        return `${year}-${month}-${day}`;
      }
    },
    getDate() {
      let now = new Date();
      let aWeekAgo = new Date(now - 1000 * 3600 * 24 * 7);
      now = this.formatDate(now, 2);
      aWeekAgo = this.formatDate(aWeekAgo, 1);
      // this.dateRange = [];
      // this.dateRange.push(aWeekAgo, now);
      // this.filterElements[0].value = [];
      // this.filterElements[0].value.push(aWeekAgo, now);
      return [aWeekAgo,now]
    },
    PatientTypeChange() {
      this._getData();
    },
    _getData() {
      // this.loading = true
      console.log('----------', this.newCondition)
      const params = {
        startDate: this.newCondition.date ? `${this.newCondition.date[0]} 00:00:00` : "",
        endDate: this.newCondition.date ? `${this.newCondition.date[1]} 23:59:59` : "",
        isBedUggIeBC: this.newCondition.bedUggIeBC?this.newCondition.bedUggIeBC:'2',
        patientType: this.newCondition.orderBed?this.newCondition.orderBed:'0',
        patientName: this.newCondition?.patientName,
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        deptCode: this.newCondition?.deptCode,
        yard: this.newCondition.yard ? this.newCondition.yard : "",
        patientTag: this.newCondition?.patientTag,
        reglevlName: this.newCondition?.reglevlName,
        diffDays: this.newCondition?.diffDays,
      };
      console.log(params);
      this.loading = true;
      getBedUggIeCW(params).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list;
          this.loading = false;
          this.total = res.data.data.total;
        } else {
          this.loading = false;
          this.$message.error(res.data.message);
        }
      });
    },
    handerSearch(val) {
      console.log("val", val);
      this.newCondition = val;
      this._getData();
    },
    handlerReset(value) {
      // this.getDate();
      this.$refs.filterForm.reset();
      const conition = this.$refs.filterForm.initReset();
      this.newCondition = {
        date: this.getDate(),
        bedUggIeBC: conition?.bedUggIeBC,
      };
      this._getData();
    },
    handleExport() {
      const params = {
        startDate: this.dateRange.length ? `${this.dateRange[0]} 00:00:00` : "",
        endDate: this.dateRange.length ? `${this.dateRange[1]} 23:59:59` : "",
        isBedUggIeBC: this.newCondition.bedUggIeBC
          ? this.newCondition.bedUggIeBC
          : "2",
        patientType: this.newCondition.orderBed
          ? this.newCondition.orderBed
          : "0",
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        patientTag: this.newCondition?.patientTag,
        reglevlName: this.newCondition?.reglevlName,
        diffDays: this.newCondition?.diffDays,
      };
      getBedUggIeCWDownLoadExcel(params).then((res) => {
        // if (res.data.code === 200) {
        const blob = new Blob([res.data]);
        const fileName = "集管床位统计报表" + ".xlsx";
        const URL = window.URL || window.webkitURL || window.moxURL;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName; // 命名下载名称
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob); // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink);
          elink.click(); // 点击触发下载
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
        // }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this._getData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this._getData();
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
